import React, { useState } from "react";
import Slider from "react-slick";
import style from "./index.module.less";

const Team = () => {
  const teamSettings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1
  };
  const [teamList, setTeamList] = useState<any>([{
    img: require("@/style/imgs/homePage/2_f.6d35799.png"),
    name: "王树",
    discipline: "131-2108-1606",
    goodAt: "wfhyedit@163.com",
    education: "北京市石景山区绿地环球文化金融城9号院4号楼808室",
  }, {
    img: require("@/style/imgs/homePage/2_f.6d35799.png"),
    name: "王树",
    discipline: "131-2108-1606",
    goodAt: "wfhyedit@163.com",
    education: "北京市石景山区绿地环球文化金融城9号院4号楼808室",
  }, {
    img: require("@/style/imgs/homePage/2_f.6d35799.png"),
    name: "王树",
    discipline: "131-2108-1606",
    goodAt: "wfhyedit@163.com",
    education: "北京市石景山区绿地环球文化金融城9号院4号楼808室",
  }, {
    img: require("@/style/imgs/homePage/2_f.6d35799.png"),
    name: "王树",
    discipline: "131-2108-1606",
    goodAt: "wfhyedit@163.com",
    education: "北京市石景山区绿地环球文化金融城9号院4号楼808室",
  }]);
  return <>
    <div className={style.team_body}>
      <div className={style.team_title}>编辑团队</div>
      <div className={style.team_desc}>
        公司拥有一支具有多年SCI学术论文编校经验的强大专家团队，
        团队通过专业评估 ，对文章的语言逻辑、行文结构等方面提出
        专业建议和指导 ，全面提升文稿质量。根据期刊审稿意见进行
        文章的进一步优化工作，直至协助文章投放成功。
      </div>
      <div className={style.slider_container}>
        <Slider {...teamSettings} arrows={false}>
          {
            teamList.map((item: any, index: number) =>
              <div className={style.team_item} key={index}>
                <img src={item.img} alt="图片加载失败" className={style.team_img} />
                <div className={style.team_desc}>
                  <div className={style.team_Label}>联系人:</div>
                  <div className={style.team_text}>
                    {item.name}
                  </div>
                  <div className={style.team_Label}>电话:</div>
                  <div className={style.team_text}>
                    {item.discipline}
                  </div>
                  <div className={style.team_Label}>邮箱:</div>
                  <div className={style.team_text}>
                    {item.goodAt}
                  </div>
                  <div className={style.team_Label}>地址:</div>
                  <div className={style.team_text}>
                    {item.education}
                  </div>
                </div>
              </div>
            )
          }
        </Slider>
      </div>
      {/* <div className={style.team_footer}>查看更多编辑</div> */}
    </div>
  </>
}

export default Team;